<template>
  <div
    class="search-content wrap-apply"
    :style="{ top: GLOBAL.currentEnvironment ? '0' : '' }"
    v-show="showSearchTag"
  >
    <Search
      ref="topSearch"
      class="search"
      placeholder="工单编号|产品名称|工序名称|批次编号"
      :isAdd="false"
      :isScreen="false"
      :isType="false"
    ></Search>
    <div class="searchBox">
      <van-cell-group>
        <p class="label FormTit"><span></span>工单编号</p>
        <van-field v-model="filterForm.orderCode" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>批次编号</p>
        <van-field v-model="filterForm.batchCode" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>产品编号</p>
        <van-field v-model="filterForm.goodCode" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>产品名称</p>
        <van-field v-model="filterForm.goodName" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>规格</p>
        <van-field v-model="filterForm.spec" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>工序名称</p>
        <van-field v-model="filterForm.processName" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>操作人</p>
        <van-field v-model="filterForm.operator" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>计价方式</p>
        <van-field-checkbox :supportClear='true' label="" placeholder="请选择" v-model="SelectArr" :columns="typeList" label-width="100"
          :option="{label:'text',value:'value'}" @confirm='selectType' />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>提交时间</p>
        <div :class="filterForm.createdTimeRead ? 'haveUnitBox' : ''">
          <van-field
            :is-link="filterForm.createdTimeRead ? false : true"
            readonly
            name="picker"
            v-model="filterForm.createdTimeRead"
            @click="planStart_beginTime = true"
            placeholder="请选择"
          >
          </van-field>
          <img
            src="~@/assets/img/filedClear.png"
            v-if="filterForm.createdTimeRead"
            alt=""
            @click.stop="clickStartClose"
            class="filedClear"
          />
        </div>
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>提交人</p>
        <van-field v-model="filterForm.commitUserName" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
    </div>
    <div class="search-bottom">
      <span class="btncancel" @click="btnCancel">重置</span>
      <span class="btnconfirm" @click="btnConfirm">确定</span>
    </div>
    <!--计划开始时间—开始时间 -->
    <van-popup
      v-model="planStart_beginTime"
      position="bottom"
      :close-on-click-overlay="false"
    >
      <van-datetime-picker
        @confirm="confirmPlanStartBeginTime"
        v-model="startTimeStart"
        @cancel="cancelPlanStartBeginTime"
        type="date"
        title="开始时间"
        :formatter="formatter"
      />
    </van-popup>
    <!--计划开始时间—结束时间 -->
    <van-popup
      v-model="planStart_endTime"
      position="bottom"
      :close-on-click-overlay="false"
    >
      <van-datetime-picker
        @confirm="confirmPlanStartEndTime"
        @cancel="cancelPlanStartEndTime"
        type="date"
        title="结束时间"
        :min-date="startEndMinTIme"
        :formatter="formatter"
      />
    </van-popup>
  </div>
</template>

<script>
const formP = {
  applicantId: "",
  operatorId: "",
  applyTimeBegin: "",
  applyTimeEnd: "",
};
import VanFieldCheckbox from "@/components/ActionSheet/VanFieldCheckbox";
import ContactPickers from "@/components/choiceuse/ContactPickers";
import upload from "@/components/upload/upload";
import VanFieldSelectPicker from "@/components/ActionSheet/VanFieldSelectPicker";
import moment from "moment";
import Search from "@/components/search";
export default {
  name: "search",
  components: {
    ContactPickers,
    upload,
    Search,
    VanFieldSelectPicker,
    VanFieldCheckbox,
  },
  data() {
    return {
      startTimeStart: new Date(),
      overTimeStart: new Date(),
      showSearchTag: false,
      planStart_beginTime: false,
      planStart_endTime: false,
      planOver_beginTime: false,
      planOver_endTime: false,
      startEndMinTIme: new Date(2020, 1, 1),
      overEndMinTIme: new Date(2020, 1, 1),

      /***** */
      filterForm: {},
      typeList: [
        {
          value: "regular",
          text: "常规计价",
        },
        {
          value: "planned_output",
          text: "计划产量计价",
        },
      ],
      SelectArr: []
    };
  },
  computed: {},
  mounted() {},
  created() {},
  methods: {
    clickStartClose() {
      this.startTimeStart = new Date();
      this.filterForm.startTime = "";
      this.filterForm.endTime = "";
      this.filterForm.createdTimeRead = "";
      this.$forceUpdate();
    },
    selectType(v) {
      if (v) {
        this.SelectArr = v;
      } else {
        this.SelectArr = [];
      }
    },
    // 选择计划开始时间—开始时间
    confirmPlanStartBeginTime(date) {
      this.startEndMinTIme = date;
      this.filterForm.startTime = moment(date).startOf("day").format("YYYY-MM-DD HH:mm:ss");
      this.filterForm.endTime = ""; // 切换开始时间后直接置空结束时间重新选择
      this.planStart_beginTime = false;
      this.planStart_endTime = true;
    },
    // 取消计划开始时间—开始时间
    cancelPlanStartBeginTime() {
      this.planStart_beginTime = false;
    },
    // 选择计划开始时间—结束时间
    confirmPlanStartEndTime(date) {
      this.filterForm.endTime = moment(date).endOf("day").format("YYYY-MM-DD HH:mm:ss");
      this.filterForm.createdTimeRead =
        moment(this.filterForm.startTime).format('YYYY-MM-DD') +
        "~" +
        moment(this.filterForm.endTime).format('YYYY-MM-DD');
      this.planStart_endTime = false;
    },
    // 取消计划开始时间—结束时间
    cancelPlanStartEndTime() {
      this.filterForm.startTime = "";
      this.startTimeStart = new Date();
      this.planStart_endTime = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "hour") {
        return val + "时";
      }
      if (type === "minute") {
        return val + "分";
      }
      return val;
    },
    showModal(keyword, dropdownObj) {
      console.log(dropdownObj);
      this.showSearchTag = true;
      this.$nextTick(() => {
        this.$refs.topSearch.value = keyword;
        this.filterForm = JSON.parse(JSON.stringify(dropdownObj));
        this.filterForm.createdTimeRead = this.filterForm.startTime ? moment(this.filterForm.startTime).format('YYYY-MM-DD') + '-' + moment(this.filterForm.endTime).format('YYYY-MM-DD') : '';
        this.SelectArr = this.filterForm.pricingType
          ? this.filterForm.pricingType.split(",")
          : [];
      });
    },
    btnCancel() {
      this.$refs.topSearch.value = "";
      this.filterForm = {};
      this.SelectArr = []
    },
    btnConfirm() {
      this.filterForm.pricingType = this.SelectArr.join(',')
      let sureObj = {
        ...this.filterForm,
        keyword: this.$refs.topSearch.value,
      };
      this.showSearchTag = false;
      this.$emit("getCategory", sureObj);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";
.search-content {
  //  padding-bottom: 0.5rem;
  position: fixed;
  top: 0.35rem;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  z-index: 99;
  .formgroup {
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
  .search-bottom {
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0.06rem 0.11rem;
    font-size: 0.16rem;
    font-weight: 500;
    .btncancel {
      flex: 1;
      background: #f6f6f6;
      border: 0.01rem solid rgba(25, 31, 37, 0.12);
      box-sizing: border-box;
      height: 0.39rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.03rem;
      margin-right: 0.11rem;
      color: #191f25;
    }
    .btnconfirm {
      flex: 1;
      background: #1890ff;
      box-sizing: border-box;
      height: 0.39rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.03rem;
      color: #ffffff;
    }
  }
}
.bottomLine {
  height: 0.01rem;
  background-color: #f0f0f0;
  margin: 0 0.16rem;
}
.searchBox {
  height: calc(100vh - 1.6rem);
  overflow-y: auto;
}
.haveUnitBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-right: 0.16rem;
  /deep/ .van-cell {
    padding-right: 0;
    width: 2.6rem;
  }
  /deep/ .van-field__control {
    max-width: 3rem;
  }
}
</style>